<div class="mat-elevation-z1">
  <mat-toolbar>
    <span class="toolbar-title">
      策略
      <ng-template [ngIf]="strategyType">（{{getTypeLabel(strategyType)}}）</ng-template>
      <ng-template [ngIf]="!strategyType">（全部）</ng-template>
    </span>
    <span class="spacer"></span>
    <button mat-stroked-button color="primary" (click)="editNew()" *ngIf="strategyType">
      <mat-icon>add_circle_outline</mat-icon>
      新建
    </button>
    <button mat-button (click)="refresh()" [disabled]="processes.refreshing">
      <mat-icon>refresh</mat-icon>
      刷新
    </button>
    <button mat-button [matMenuTriggerFor]="actions">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #actions="matMenu">
      <button mat-menu-item (click)="pauseAll()">
        <mat-icon>pause</mat-icon>
        全部暂停
      </button>
      <button mat-menu-item (click)="resumeAll()">
        <mat-icon>fast_forward</mat-icon>
        全部恢复
      </button>
      <button mat-menu-item (click)="executeAll()" [disabled]="processes.executeAll">
        <mat-icon>subdirectory_arrow_left</mat-icon>
        立即检查
      </button>
      <ng-template [ngIf]="strategyType">
        <ng-container *ngFor="let ex of $exchs | async">
          <a mat-menu-item routerLink="/strategies/{{strategyType.toLowerCase()}}/edit-many/{{ex.code}}"
             *ngIf="filterEx===ex.code||filterEx==='all'">
            <mat-icon>tune</mat-icon>
            批量设置（{{ex.name}}）
          </a>
        </ng-container>
      </ng-template>
    </mat-menu>
  </mat-toolbar>

  <div class="table-filter-form">
    <div class="form-field">
      <span class="label subordinated">交易所</span>
      <mat-button-toggle-group [value]="filterEx"
                               (change)="exGroupChanged($event)">
        <mat-button-toggle value="all">全部</mat-button-toggle>
        <mat-button-toggle [value]="ex.code" *ngFor="let ex of $exchs | async">
          {{ex.name}}
        </mat-button-toggle>
      </mat-button-toggle-group>
    </div>
    <div class="form-field" *ngIf="!strategyType">
      <span class="label subordinated">方向</span>
      <mat-button-toggle-group [value]="filterSide"
                               (change)="sideGroupChanged($event)">
        <mat-button-toggle value="all">不限</mat-button-toggle>
        <mat-button-toggle value="buy">买入</mat-button-toggle>
        <mat-button-toggle value="sell">卖出</mat-button-toggle>
      </mat-button-toggle-group>
    </div>
    <div class="form-field">
      <span class="label subordinated">状态</span>
      <mat-button-toggle-group [value]="filterStatus"
                               (change)="statusGroupChanged($event)">
        <mat-button-toggle value="all">不限</mat-button-toggle>
        <mat-button-toggle value="started">Started</mat-button-toggle>
        <mat-button-toggle value="paused">Paused</mat-button-toggle>
      </mat-button-toggle-group>
    </div>
  </div>

  <table mat-table class="full-width" matSort matSortActive="ex" matSortDirection="asc">

    <ng-container matColumnDef="index">
      <th mat-header-cell *matHeaderCellDef>#</th>
      <td mat-cell *matCellDef="let row; let index=index">
        {{index + 1 }}&nbsp;
      </td>
    </ng-container>

    <ng-container matColumnDef="baseCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>基础币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.baseCcy)" alt="">
        <div class="ccy-code">{{row.baseCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="quoteCcy">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>报价币种</th>
      <td class="ccy-logo-code" mat-cell *matCellDef="let row">
        <img class="ccy-logo" [src]="CoinLogoPath(row.quoteCcy)" alt="">
        <div class="ccy-code">{{row.quoteCcy}}</div>
      </td>
    </ng-container>

    <ng-container matColumnDef="ex">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易所</th>
      <td mat-cell *matCellDef="let row">
        {{row.ex}}
      </td>
    </ng-container>

    <ng-container matColumnDef="type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>类型</th>
      <td mat-cell *matCellDef="let row">
        {{getTypeLabel(row.type)}}
      </td>
    </ng-container>

    <ng-container matColumnDef="watchDirection">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>关注价格方向</th>
      <td mat-cell *matCellDef="let row">
        {{row.watchDirection}}
      </td>
    </ng-container>

    <ng-container matColumnDef="side">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>方向</th>
      <td mat-cell *matCellDef="let row"
          [class.order-side-buy]="row.side==='buy'"
          [class.order-side-sell]="row.side==='sell'">
        {{row.side}}
      </td>
    </ng-container>

    <ng-container matColumnDef="basePoint">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>基点</th>
      <td mat-cell *matCellDef="let row">{{row.basePoint | effectdigits}}</td>
    </ng-container>

    <ng-container matColumnDef="expectingPercent">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>期望</th>
      <td mat-cell *matCellDef="let row">
        <ng-template [ngIf]="row.expectingPercent">
          {{row.expectingPercent}}% <br>
        </ng-template>
        <span *ngIf="row.expectingPoint" class="subordinated">
          {{row.expectingPoint | effectdigits}}
        </span>
      </td>
    </ng-container>

    <ng-container matColumnDef="drawbackPercent">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>最大回落</th>
      <td mat-cell *matCellDef="let row">
        <ng-template [ngIf]="row.drawbackPercent">
          {{row.drawbackPercent}}% <br>
          <span *ngIf="row.expectingPoint" class="subordinated">
            <!--{{row.watchDirection === 'up' ? '>=' : '<='}}-->
            {{row.expectingPoint * (100 - row.drawbackPercent * (row.watchDirection === 'up' ? 1 : -1)) / 100.0 | effectdigits}}
          </span>
        </ng-template>
      </td>
    </ng-container>

    <ng-container matColumnDef="tradeVol">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易量</th>
      <td mat-cell *matCellDef="let row">
        <span *ngIf="row.tradeVolByValue">{{row.tradeVol}}</span>
        <span *ngIf="!row.tradeVolByValue">{{row.tradeVolPercent | rawpercent}}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="lastCheckAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>上次检查</th>
      <td mat-cell *matCellDef="let row">
        {{row.lastCheckPrice | effectdigits}}<br>
        <span class="subordinated">{{row.lastCheckAt | date:'MM-dd HH:mm'}}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="peak">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>已达峰值</th>
      <td mat-cell *matCellDef="let row">
        {{row.peak | effectdigits}}<br>
        <span class="subordinated">{{row.peakTime | date:'MM-dd HH:mm'}}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="valley">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>已达谷值</th>
      <td mat-cell *matCellDef="let row">
        {{row.valley | effectdigits}}<br>
        <span class="subordinated">{{row.valleyTime | date:'MM-dd HH:mm'}}</span>
      </td>
    </ng-container>

    <ng-container matColumnDef="beyondExpect">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>已达期望</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.beyondExpect">check</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="tradingPoint">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>交易点</th>
      <td mat-cell *matCellDef="let row">
        <ng-template [ngIf]="row.tradingPoint">
          {{row.watchDirection === 'up' ? '>=' : '<='}}
          {{row.tradingPoint | effectdigits}}
        </ng-template>
      </td>
    </ng-container>

    <ng-container matColumnDef="watchLevel">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>关注级别</th>
      <td mat-cell *matCellDef="let row"
          [class.primary-color]="row.watchLevel==='medium'"
          [class.accent-color]="row.watchLevel==='intense'">
        {{row.watchLevel}}
      </td>
    </ng-container>

    <ng-container matColumnDef="createdAt">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>创建于</th>
      <td mat-cell *matCellDef="let row">
        {{row.createdAt | date:'y-MM-dd'}}
      </td>
    </ng-container>

    <ng-container matColumnDef="status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>状态</th>
      <td mat-cell *matCellDef="let row" [class.accent-color]="row.status==='started'"
          [class.status-done]="row.status==='placed'"
          [class.subordinated]="row.status==='initial'">
        {{row.status}}
      </td>
    </ng-container>

    <ng-container matColumnDef="updateBasePoint">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>更新基点</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.updateBasePoint">check</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="autoStartNext">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>自动接续</th>
      <td mat-cell *matCellDef="let row">
        <mat-icon class="check" *ngIf="row.autoStartNext">check</mat-icon>
      </td>
    </ng-container>

    <ng-container matColumnDef="executor">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>执行器</th>
      <td mat-cell *matCellDef="let row">
        {{row.executor}}
      </td>
    </ng-container>

    <ng-container matColumnDef="actions">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let row" align="end">
        <a mat-button routerLink="/strategies/{{row.type.toLowerCase()}}/{{row.id}}"
           *ngIf="row.status!=='placed'">
          <mat-icon>edit</mat-icon>
          设置
        </a>
        <button mat-button [matMenuTriggerFor]="actions">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #actions="matMenu">
          <button mat-menu-item (click)="showDetail(row)">
            <mat-icon>list</mat-icon>
            详情
          </button>
          <button mat-menu-item (click)="openKlineChart(row)">
            <mat-icon>show_chart</mat-icon>
            K 线
          </button>
          <ng-template [ngIf]="row.status!=='placed'">
            <button mat-menu-item (click)="start(row)"
                    *ngIf="row.status!=='started'">
              <mat-icon>play_arrow</mat-icon>
              开始
            </button>
            <button mat-menu-item (click)="pause(row)" *ngIf="row.status==='started'">
              <mat-icon>stop</mat-icon>
              暂停
            </button>
            <button mat-menu-item (click)="clearPeak(row)" *ngIf="row.peak">
              <mat-icon>wrong_location</mat-icon>
              清除峰/谷值
            </button>
            <button mat-menu-item (click)="execute(row)" [disabled]="processes['execute-' + row.id]"
                    *ngIf="row.executor!=='ws'&&row.status==='started'">
              <mat-icon>subdirectory_arrow_left</mat-icon>
              立即检查
            </button>
            <button mat-menu-item (click)="openOrderForm(row)">
              <mat-icon>shopping_cart</mat-icon>
              现在下单
            </button>
            <button mat-menu-item (click)="remove(row)">
              <mat-icon>remove_circle_outline</mat-icon>
              删除
            </button>
          </ng-template>
        </mat-menu>

      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

</div>

<p>&nbsp;</p>
